<template>
  <div>
    <el-card class="box-card">
      <div class="title" style="font-size: 20px; font-weight: bold">
        条件筛选
      </div>
      <el-form label-position="right" label-width="130px" size="mini" :inline="true" :model="formData" ref="queryForm"
        class="demo-form-inline wrap_inline">
        <el-form-item label="聚合单元名称：">
          <el-input v-model="formData.aggregationName" placeholder="请输入聚合单元名称" clearable class="input_inner"></el-input>
        </el-form-item>
        <el-form-item label="聚合单元类型：">
          <el-select v-model="formData.aggregationType" clearable class="input_inner" placeholder="请选择聚合单元类型"
            @change="headerPolymerizationUnitTypeChange">
            <el-option v-for="item in serviceTypes1" :key="item.value" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属行政区域：">
          <el-select v-model="formData.respectiveRegional" clearable class="input_inner" placeholder="请选择所属行政区域"
            @change="headerRespectiveRegionalChange">
            <el-option v-for="item in serviceTypes2" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属运营商：">
          <el-select v-model="formData.operator" clearable class="input_inner" placeholder="请选择所属运营商"
            @change="headerOperatorChange">
            <el-option v-for="item in serviceTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充电场站类型：">
          <el-select v-model="formData.chargeStationType" clearable class="input_inner" placeholder="请选择充电场站类型"
            @change="headerChargeStationTypeChange">
            <el-option v-for="item in serviceTypes3" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="headerSearch">查询</el-button>
          <el-button @click="headerReset" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div style="padding: 0 0px" class="table_wrap">
        <div class="add">
          <el-button style="margin-left: 20px" type="primary" @click="addDialog">新增</el-button>
        </div>
        <pagetable ref="pagetable" :data="jgtab" :current-page="currentPage" :pageSize="pageSize" :total="jgtab.length"
          @refresh-data="handleRefresh" @current-change="handleCurrentChange" @size-change="handleSizeChange">
          <el-table-column show-overflow-tooltip type="index" width="50" label="序号"></el-table-column>
          <el-table-column show-overflow-tooltip label="聚合单元名称" prop="aggregationName"></el-table-column>
          <el-table-column show-overflow-tooltip label="聚合单元类型" prop="aggregationType"></el-table-column>
          <el-table-column show-overflow-tooltip label="所属区域" prop="respectiveRegional"></el-table-column>
          <el-table-column show-overflow-tooltip label="所属运营商" prop="operator"></el-table-column>
          <el-table-column show-overflow-tooltip label="充电场站类型" prop="chargeStationType" align="center"></el-table-column>
          <el-table-column label="操作" width="260" fixed="right">
            <template slot-scope="scope">
              <span style="color: blue; cursor: pointer; padding: 0 5px" @click="editDialog(scope.row)">编辑</span>
              <span style="color: blue; cursor: pointer; padding: 0 5px" @click="viewDetails(scope.row)">查看</span>
              <span style="color: red; cursor: pointer; padding: 0 5px"
                @click="removePolymerizationUnitDate(scope.row)">删除</span>
            </template>
          </el-table-column>
        </pagetable>
      </div>
    </el-card>

    <!-- 新增/编辑/查看聚合单元 -->
    <el-dialog class="dia_power1" :visible.sync="addPolymerizationUnitShow" width="50%"
      :title="polymerizationUnitTitle + '聚合单元'" height="600px!important" :close-on-click-modal="false"
      :modal-append-to-body="false">
      <el-form label-position="right" label-width="120px" size="mini" :inline="true" :model="information" ref="refform"
        class="addForm" style="background: #fff">
        <div style="display: flex">
          <div>
            <el-form-item label="聚合单元名称" class="text">
              <el-input placeholder="请输入聚合单元名称" v-model="information.aggregationName" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="所属行政区域" class="text">
              <el-select v-model="information.respectiveRegional" clearable class="input_inner" @change="regionChange"
                :disabled="disabled">
                <el-option v-for="item in serviceTypes2" :key="item.value" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="充电站类型" class="text">
              <el-select v-model="information.chargeStationType" clearable class="input_inner" @change="stationTypeChange"
                :disabled="disabled">
                <el-option v-for="item in serviceTypes3" :key="item.value" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="聚合单元类型" class="text">
              <el-select v-model="information.aggregationType" clearable class="input_inner"
                @change="polymerizationUnitTypeChange" :disabled="disabled">
                <el-option v-for="item in serviceTypes1" :key="item.value" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属运营商" class="text">
              <el-select v-model="information.operator" clearable class="input_inner" @change="owningCarrierChange"
                :disabled="disabled">
                <el-option v-for="item in serviceTypes" :key="item.value" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div>
        <span slot="footer" class="addBtn">
          <el-button type="primary" @click="addPolymerizationUnit" v-show="addBtn">新 增</el-button>
        </span>
      </div>
      <pagetable ref="pagetable" :data="jgtab1" :current-page="currentPage" :pageSize="pageSize" :total="jgtab1.length"
        @refresh-data="handleRefresh" @current-change="handleCurrentChange" @size-change="handleSizeChange"
        @selection-change="handleSelectionChange">
        <el-table-column show-overflow-tooltip type="index" width="50" label="序号"></el-table-column>

        <el-table-column show-overflow-tooltip label="充电枪标识" prop="id"></el-table-column>

        <el-table-column show-overflow-tooltip label="充电枪名称" prop="devName"></el-table-column>

        <el-table-column show-overflow-tooltip label="投运日期" prop="optTime"></el-table-column>

        <el-table-column show-overflow-tooltip label="所属组织机构" prop="orgId"></el-table-column>
        <el-table-column show-overflow-tooltip label="互联互通第三方运营商" prop="ownerId"></el-table-column>
      </pagetable>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="polymerizationUnitSub">确 定</el-button>
        <el-button @click="addPolymerizationUnitShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 新增/编辑枪数据列表 -->
    <el-dialog class="dia_power1" :visible.sync="addChargingGunShow" width="50%" :title="chargingGunTitle + '充电枪'"
      height="600px!important" :close-on-click-modal="false" :modal-append-to-body="false">
      <el-table ref="multipleTable" :data="listData" row-key="getRowKeys" @select="handleCheckBox"
        @select-all="handleSelectAll">
        <el-table-column show-overflow-tooltip type="selection" :reserve-selection="true" width="50"
          align="center"></el-table-column>
        <el-table-column show-overflow-tooltip type="index" width="50" label="序号"></el-table-column>
        <el-table-column show-overflow-tooltip label="充电枪标识qqqq" prop="id"></el-table-column>
        <el-table-column show-overflow-tooltip label="充电枪名称" prop="devName"></el-table-column>
        <el-table-column show-overflow-tooltip label="投运日期" prop="optTime"></el-table-column>
        <el-table-column show-overflow-tooltip label="所属组织机构" prop="orgId"></el-table-column>
        <el-table-column show-overflow-tooltip label="互联互通第三方运营商" prop="ownerId"></el-table-column>
      </el-table>
      <div class="di hidden-sm-and-down" v-if="listData.length > 0">
        <el-pagination @size-change="handleSizeCharginggunChange1" @current-change="handleCharginggunCurrentChange1"
          :current-page="currentPage" :page-sizes="[10, 40, 60, 80, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="gunTotal">
        </el-pagination>
        <el-button-group>
          <el-button class="refresh_" size="mini" icon="el-icon-refresh" @click="handleRefresh"></el-button>
        </el-button-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editChargingGunGrouping">确 定</el-button>
        <el-button @click="addChargingGunShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagetable from "@/components/pagetable";
import singleimageupload from "@/components/upload/singleimageupload";
import {
  polymerizationUnitList,
  chargingGunList,
  getInfoPolymerizationUnit,
  editPolymerizationUnit,
  removePolymerizationUnit
} from "@/api/carNetworkInteraction/index.js";
export default {
  data() {
    return {
      gunTotal: 0,
      multipleSelection: [],
      addBtn: false,
      disabled: false,
      polymerizationUnitTitle: "新增",
      chargingGunTitle: "新增",
      addChargingGunShow: false,
      groupName: "",
      value: "",
      //充电场站类型
      serviceTypes3: [
        { value: "公共站", name: "公共站" },
        { value: "专用站", name: "专用站" },
        { value: "居民小区", name: "居民小区" }
      ],
      //所属行政区域
      serviceTypes2: [
        { value: "鼓楼区", name: "鼓楼区" },
        { value: "秦淮区", name: "秦淮区" },
        { value: "建邺区", name: "建邺区" },
        { value: "玄武区", name: "玄武区" },
        { value: "雨花台区", name: "雨花台区" },
        { value: "浦口区", name: "浦口区" },
        { value: "六合区", name: "六合区" },
        { value: "江北新区", name: "江北新区" },
        { value: "江宁区", name: "江宁区" },
        { value: "溧水区", name: "溧水区" },
        { value: "高淳区", name: "高淳区" }
      ],
      //聚合单元类型
      serviceTypes1: [
        { value: "台变", name: "台变" },
        { value: "站", name: "站" }
      ],
      //所属运营商
      serviceTypes: [
        { value: 1, name: "运营商1" },
        { value: 2, name: "运营商2" },
        { value: 3, name: "运营商3" }
      ],
      formLabelAlign: {},
      information: {
        aggregationName: "", //聚合单元名称
        aggregationType: "", //聚合单元类型
        chargeStationType: "", //充电站类型
        operator: "", //所属运营商
        respectiveRegional: "" //所属行政区域
      },
      selectionArray: [],
      jgtab: [], //分组列表回显
      jgtab1: [],
      listData: [],
      table: [],
      pageSize: 10,
      currentPage: 1,
      pageSize1: 10,
      currentPage1: 1,
      total: 0,
      addPolymerizationUnitShow: false,
      //头部查询条件
      formData: {
        aggregationName: "",
        aggregationType: "",
        respectiveRegional: "",
        operator: "",
        chargeStationType: ""
      },
      removeButDisabled: false,
      butEnabled: true
    };
  },
  components: { pagetable, singleimageupload },
  watch: {
    selectionArray(value) {
      if (value.length == 0) {
        this.butEnabled = true;
      } else {
        this.butEnabled = false;
      }
    }
  },
  mounted() {
    this.polymerizationUnitListData();
  },
  methods: {
    //该方法是单选时的方法
    handleCheckBox(rows, row) {
      if (this.multipleSelection.find(item => item.id == row.id)) {
        //下面这个filter方法就是删除的方法
        this.multipleSelection = this.multipleSelection.filter(
          item => item.id != row.id
        );
      } else {
        this.multipleSelection.push(row);
      }
    },
    //该方法是当页全选的方法
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach(row => {
          if (!this.multipleSelection.find(item => item.id == row.id)) {
            this.multipleSelection.push(row);
          }
        });
      } else {
        this.listData.forEach(row => {
          this.multipleSelection = this.multipleSelection.filter(
            item => item.id != row.id
          );
        });
      }
    },
    //下面的方法是进行设置行标识key的方法
    getRowKeys(row) {
      return row.id;
    },
    getdata(parameter) {
      // this.loading = true
      /***
       * 调用后端接口
       */
      TestCaseList(parameter)
        .then(res => {
          this.loading = false;
          if (res.success == false) {
            this.$message({
              type: "info",
              message: res.msg
            });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
            //这里是回显的功能代码 当切换页面的时候 会重新调用list方法，在这个位置进行判断这个数据是否回显
            this.$nextTick(() => {
              this.listData.forEach((item, index) => {
                if (this.multipleSelection.findIndex(v => v == item.id) >= 0) {
                  this.$refs.multipleTable.toggleRowSelection(
                    this.$refs.multipleTable.data[index],
                    true
                  );
                }
              });
              console.log("这里是每次查询list接口之后的操作,看看是否回显");
              console.log("multipleSelection=", this.multipleSelection);
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    //新增聚合单元提交
    polymerizationUnitSub() {
      let groupingId = "";
      console.log(this.jgtab1,'11111111111111111')
      if (this.jgtab1 != []) {
        for (let i = 0; i < this.jgtab1.length; i++) {
          if (i == this.jgtab1.length - 1) {
            groupingId += this.jgtab1[i].id;
          } else {
            groupingId += this.jgtab1[i].id + ",";
          }
        }
        if (this.information.id == '') {
          console.log(this.jgtab1.length);
          editPolymerizationUnit({
            connectorId: groupingId,
            aggregationName: this.information.aggregationName,
            aggregationType: this.information.aggregationType,
            respectiveRegional: this.information.respectiveRegional,
            operator: this.information.operator,
            chargeStationType: this.information.chargeStationType
          }).then(res => {
            if (res.code == 200) {
              this.addPolymerizationUnitShow = false;
              this.$message.success("新增成功");
              this.currentPage = 1;
              this.polymerizationUnitListData();
            }
          });
        } else {
          editPolymerizationUnit({
            id: this.information.id,
            connectorId: groupingId,
            aggregationName: this.information.aggregationName,
            aggregationType: this.information.aggregationType,
            respectiveRegional: this.information.respectiveRegional,
            operator: this.information.operator,
            chargeStationType: this.information.chargeStationType
          }).then(res => {
            if (res.code == 200) {
              this.addPolymerizationUnitShow = false;
              this.$message.success("编辑成功");
              this.currentPage = 1;
              this.polymerizationUnitListData();
            }
          });
        }
      }
    },
    //充电枪选择分组
    editChargingGunGrouping() {
      console.log(this.multipleSelection, "1111111111111111");
      this.jgtab1 = this.multipleSelection;
      this.addChargingGunShow = false;
    },
    changeCurrentPage() {
      console.log(this.multipleSelection, "第一步");
      chargingGunList({
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }).then(res => {
        if (res.code == 200) {
          this.addChargingGunShow = true;
          this.listData = res.result.records;
          this.gunTotal = res.result.total;
          console.log(this.listData, "111111111111111111111");
          this.$nextTick(() => {
            this.listData.forEach((item, index) => {
              this.$refs.multipleTable.toggleRowSelection(item, false);
            });
            this.listData.forEach((item, index) => {
              if (this.multipleSelection.findIndex(v => v.id == item.id) >= 0) {
                console.log(this.$refs.multipleTable.data[index], "111111111");
                this.$refs.multipleTable.toggleRowSelection(
                  this.$refs.multipleTable.data[index],
                  true
                );
              }
            });
            console.log("这里是每次查询list接口之后的操作,看看是否回显");
            console.log("multipleSelection=", this.multipleSelection);
          });
        }
      });
    },
    //新增/编辑充电枪列表
    addPolymerizationUnit() {
      this.currentPage = 1;
      if (this.polymerizationUnitTitle == "新增") {
        this.chargingGunTitle = "新增";
      } else if (this.polymerizationUnitTitle == "编辑") {
        this.chargingGunTitle = "编辑";
      }
      this.changeCurrentPage();
    },
    //聚合单元列表
    polymerizationUnitListData() {
      polymerizationUnitList({
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }).then(res => {
        if (res.code == 200) {
          this.jgtab = res.result.records;
          this.jgtab.length = res.result.total;
        }
      });
    },
    //删除聚合单元
    removePolymerizationUnitDate(row) {
      removePolymerizationUnit({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.polymerizationUnitListData();
        }
      });
    },
    //新增弹框聚合单元-所属行政区域下拉框
    regionChange(val) {
      this.region = val;
      console.log(this.region);
    },
    //新增弹框聚合单元-充电站类型弹框下拉框
    stationTypeChange(val) {
      this.stationType = val;
      console.log(this.stationType);
    },
    //新增弹框聚合单元-所属运营商下拉框
    owningCarrierChange(val) {
      this.owningCarrier = val;
      console.log(this.owningCarrier);
    },
    //新增弹框聚合单元-类型下拉框
    polymerizationUnitTypeChange(val) {
      this.polymerizationUnitType = val;
      console.log(this.polymerizationUnitType);
    },
    //头部聚合单元类型下拉框
    headerPolymerizationUnitTypeChange(val) {
      this.formData.aggregationType = val;
    },
    //头部行政区域下拉框
    headerRespectiveRegionalChange(val) {
      this.formData.respectiveRegional = val;
    },
    //头部运营商下拉框
    headerOperatorChange(val) {
      this.formData.operator = val;
    },
    //头部充电场站类型下拉框
    headerChargeStationTypeChange(val) {
      this.formData.chargeStationType = val;
    },
    //聚合单元查看详情弹框
    viewDetails(row) {
      this.polymerizationUnitTitle = "详情";
      this.addPolymerizationUnitShow = true;
      getInfoPolymerizationUnit({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.information = res.result;
          this.disabled = true;
          this.addBtn = false;
        }
      });
    },
    //聚合单元新增弹框
    addDialog() {
      this.polymerizationUnitTitle = "新增";
      this.addPolymerizationUnitShow = true;
      this.disabled = false;
      this.addBtn = true;
      this.information = {
        aggregationName: null, //聚合单元名称
        aggregationType: null, //聚合单元类型
        chargeStationType: null, //充电站类型
        operator: null, //所属运营商
        respectiveRegional: null //所属行政区域
      };
      this.jgtab1 = [];
    },
    //聚合单元编辑弹框
    editDialog(row) {
      this.polymerizationUnitTitle = "编辑";
      this.addPolymerizationUnitShow = true;
      this.disabled = false;
      this.addBtn = true;
      getInfoPolymerizationUnit({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.information = res.result;
          this.multipleSelection = this.jgtab1 = res.result.tassetConnectors;
          // this.multipleSelection = this.jgtab1.map(i => {
          //   return i.id
          // })
        }
      });
    },
    //分页点击事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.polymerizationUnitListData();
    },
    handleRefresh(val) {
      this.currentPage = 1;
    },
    //头部查询
    headerSearch() {
      polymerizationUnitList({
        aggregationName: this.formData.aggregationName,
        aggregationType: this.formData.aggregationType,
        respectiveRegional: this.formData.respectiveRegional,
        operator: this.formData.operator,
        chargeStationType: this.formData.chargeStationType,
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.jgtab = res.result.records;
        }
      });
    },
    //头部查询重置
    headerReset() {
      polymerizationUnitList({
        aggregationName: "",
        aggregationType: "",
        respectiveRegional: "",
        operator: "",
        chargeStationType: "",
        pageSize: 20,
        pageNo: 1
      }).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.jgtab = res.result.records;
        }
      });
      this.formData = {
        aggregationName: "",
        aggregationType: "",
        respectiveRegional: "",
        operator: "",
        chargeStationType: ""
      };
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
      // this.$nextTick(() => {
      //   this.$refs["form"].resetFields();
      // });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCharginggunCurrentChange(val) {
      this.currentPage1 = val;
    },
    //充电枪分页
    handleCharginggunCurrentChange1(val) {
      this.currentPage = val;
      this.changeCurrentPage();
    },
    handleSizeCharginggunChange(val) {
      this.pageSize = val;
    },
    //充电枪分页
    handleSizeCharginggunChange1(val) {
      this.pageSize = val;
      this.changeCurrentPage();
    },
    //表格选择框事件
    handleSelectionChange(val) {
      if (val.length) {
        this.removeButDisabled = false;
      } else {
        this.removeButDisabled = true;
      }
      this.selectionArray = val;
      console.log(this.selectionArray);
    },
    handleSelectionChange1(val) {
      this.selectionArray = val;
      console.log(this.selectionArray, "111111111111111111");
    }
  }
};
</script>
<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
